<template>
  <div class="hello">
    <p>gasdfasdfadsf</p>
    <l-button @click="setTreeData">setTreeData</l-button>
    <l-button @click="setGridData">setGridData</l-button>
    <l-button @click="clickButton">openModal</l-button>

    <l-grid style="margin: 20px 0;" :grid="grid"></l-grid>

    <l-tree-view :tree="tree"></l-tree-view>

    <l-modal :show="showModal">
      <div slot="header">
        <p style="margin: 0;">增加权限</p>
      </div>
      <div slot="body">
        <div>
          <p>父节点: {{currentParentNodeLabel}}</p>
        </div>
        <div style="margin: 10px 0;">
          <l-input v-model="permissionId" placeholder="权限id"></l-input>
        </div>
        <div>
          <l-input v-model="permissionLabel" placeholder="权限名称"></l-input>
        </div>
      </div>
      <div slot="footer">
        <l-button @click="confirm">确定</l-button>
        <l-button @click="clickButton">取消</l-button>
      </div>
    </l-modal>
  </div>
</template>

<script>
import LanayaUI from './../../src/index';

const gridData = [{
  'id': '_0nrgRWpMJ02HaqellVMBxgoydEmOz9zcCS1g0V8p9KP7oOY',
  'username': '1030006',
  'name': 'David',
  'age': 40,
  'phone': '13800000000',
  'available': 1,
  'deleted': 0,
  'crdt': '2019-07-24T05:26:28.000Z',
  'mddt': null,
  'dedt': null
}, {
  'id': '_2f39x2BoFtMPLm2m0tEMEMTjzx6dmZT16xj36RfdN2cAX55',
  'username': '1030004',
  'name': 'Amy',
  'age': 33,
  'phone': '13800000000',
  'available': 1,
  'deleted': 0,
  'crdt': '2019-07-24T05:25:50.000Z',
  'mddt': null,
  'dedt': null
}, {
  'id': '_40yUuSbHc7jAzsiEVw8ILixKOGGuOikWVUYDD3adwZ8DJSZ',
  'username': '1231227',
  'name': 'Nat',
  'age': 20,
  'phone': '13800000000',
  'available': 1,
  'deleted': 0,
  'crdt': '2019-07-29T03:24:20.000Z',
  'mddt': null,
  'dedt': null
}, {
  'id': '_5yt0EsYvXx6252nzTJwVxFW99QEY9xusdNsC6KJqG8xCviu',
  'username': '1131127',
  'name': 'Ivy',
  'age': 20,
  'phone': '13800000000',
  'available': 1,
  'deleted': 0,
  'crdt': '2019-07-29T03:22:12.000Z',
  'mddt': null,
  'dedt': null
}, {
  'id': '_FbNoRlM9Dj807jlOFtADz5eaAFI5wpIPdO3W3pmyWsWylU9',
  'username': '1231127',
  'name': 'Mike',
  'age': 20,
  'phone': '13800000000',
  'available': 1,
  'deleted': 0,
  'crdt': '2019-07-29T03:23:57.000Z',
  'mddt': null,
  'dedt': null
}, {
  'id': '_IktlysYqbWgdzCy6g1SUb1hnkvAWSr7ce2YVRiSFW4hvzUv',
  'username': '1030007',
  'name': 'Bob',
  'age': 31,
  'phone': '13800000000',
  'available': 1,
  'deleted': 0,
  'crdt': '2019-07-24T05:26:03.000Z',
  'mddt': null,
  'dedt': null
}, {
  'id': '_JyjjGqHbp1l6l0CGgoyRhhCLIXpcpGAiCq1ddAoHt57bXku',
  'username': '1031027',
  'name': 'Grange',
  'age': 40,
  'phone': '13800000000',
  'available': 1,
  'deleted': 0,
  'crdt': '2019-07-29T03:21:33.000Z',
  'mddt': null,
  'dedt': null
}, {
  'id': '_OKf5GPHglBVZf32gwvXa6mZxq2K9NIEi7bC5K5ogR3CRpDt',
  'username': '1030001',
  'name': 'Jack',
  'age': 28,
  'phone': '13800000034',
  'available': 1,
  'deleted': 0,
  'crdt': '2019-07-24T05:22:15.000Z',
  'mddt': null,
  'dedt': null
}, {
  'id': '_bHNmnbZ8o7RcRh19gQyBrdTWxdwKAhUh2pgID9tkV5YjMH9',
  'username': '1030027',
  'name': 'Foye',
  'age': 40,
  'phone': '13800000000',
  'available': 1,
  'deleted': 0,
  'crdt': '2019-07-29T03:21:13.000Z',
  'mddt': null,
  'dedt': null
}, {
  'id': '_eBVoPZqYboyacAqvELBWXCZQPC3Xn1MMkgWKyGuuXbdYwUK',
  'username': '1030002',
  'name': 'Tom',
  'age': 23,
  'phone': '13800000000',
  'available': 1,
  'deleted': 0,
  'crdt': '2019-07-24T05:22:40.000Z',
  'mddt': null,
  'dedt': null
}, {
  'id': '_eZ9gNc9QQ4FBa2YKG15Gm7zzRGfpKzhU2VUjmtMSvMWodJp',
  'username': '1030005',
  'name': 'Chris',
  'age': 25,
  'phone': '13800000000',
  'available': 1,
  'deleted': 0,
  'crdt': '2019-07-24T05:26:13.000Z',
  'mddt': null,
  'dedt': null
}, {
  'id': '_kHc7GccdxRXJLw65gk4C9KPKd1vT8jkQ19JZO6Yy2y27c0u',
  'username': '1131128',
  'name': 'Kate',
  'age': 20,
  'phone': '13800000000',
  'available': 1,
  'deleted': 0,
  'crdt': '2019-07-29T03:23:04.000Z',
  'mddt': null,
  'dedt': null
}, {
  'id': '_rTXjpAKtfWoQ5MiFMSewrV8riTftwYvOKSbac05JA6mqzso',
  'username': '1030008',
  'name': 'Emily',
  'age': 40,
  'phone': '13800000000',
  'available': 1,
  'deleted': 0,
  'crdt': '2019-07-29T03:20:29.000Z',
  'mddt': null,
  'dedt': null
}, {
  'id': '_xGg5pALdGCOP2rB7M5QCOzhznC4z4YLVqVjSa2ODzgV7QMQ',
  'username': '1031127',
  'name': 'Hill',
  'age': 40,
  'phone': '13800000000',
  'available': 1,
  'deleted': 0,
  'crdt': '2019-07-29T03:21:45.000Z',
  'mddt': null,
  'dedt': null
}, {
  'id': '_ztw2gNj9Zcz9Z5TdEPamsI6oaFiZb9s2wdFIdf3GtzTsuJd',
  'username': '1030003',
  'name': 'Lina',
  'age': 23,
  'phone': '13800000000',
  'available': 1,
  'deleted': 0,
  'crdt': '2019-07-24T05:23:01.000Z',
  'mddt': null,
  'dedt': null
}];

export default {
  name: 'HelloWorld',
  methods: {
    setTreeData () {
      this.tree.setData([{
        'uuid': '_7rafa34KjwPaHaJTl9bBudJK34O6wsRB6nKA0AStvIQpcOXo3gJJVjyEezc4BiG',
        'id': 'Kms',
        'label': '知识库',
        'parent': null,
        'description': null,
        'enable': 1,
        'create_date': '2019-05-07T07:26:32.000Z',
        'modify_date': null
      }, {
        'uuid': '_AsXyCNX8dJhAt0y5h8Oslopjp6hx2rcsfL8sCFbLZBOGk3ZNRdVNcJsctNxQrq3',
        'id': 'Kms.edit',
        'label': '编辑',
        'parent': 'Kms',
        'description': null,
        'enable': 1,
        'create_date': '2019-05-07T07:26:32.000Z',
        'modify_date': null
      }, {
        'uuid': '_DIcE2dsg3M9xfrOfJw4jBSVU5WxgaOmrH0UiWuZrrgHTkGX1o31ls2aW8aW01zc',
        'id': 'Kms.verify',
        'label': '确认',
        'parent': 'Kms',
        'description': null,
        'enable': 1,
        'create_date': '2019-05-07T07:26:31.000Z',
        'modify_date': null
      }, {
        'uuid': '_GPkAbnmJfALNJB8uBsJOaEhJ0CqQ1ixHMOJwEj8dSz8XBw8xqunF1TWrpAsgsze',
        'id': 'Kms.view',
        'label': '查看',
        'parent': 'Kms',
        'description': null,
        'enable': 1,
        'create_date': '2019-05-07T07:26:31.000Z',
        'modify_date': null
      }]);
    },
    setGridData () {
      let data = gridData[Math.floor(Math.random() * gridData.length)];
      this.grid.setData([data]);
    },
    confirm () {
      this.tree.addItem({
        id: this.permissionId,
        label: this.permissionLabel,
        parent: this.currentParentNode ? this.currentParentNode[this.tree.format.id] : null
      });
      this.showModal = false;
    },
    clickButton () {
      this.permissionId = null;
      this.permissionLabel = null;
      this.currentParentNode = null;
      this.showModal = !this.showModal;
    }
  },
  computed: {
    currentParentNodeLabel () {
      return this.currentParentNode ? this.currentParentNode[this.tree.format.label] : '/';
    }
  },
  data () {
    const _this = this;
    return {
      permissionId: null,
      permissionLabel: null,
      currentParentNode: null,
      tree: new LanayaUI.TreeView({
        buttons: [{
          label: '增加',
          click: function (item) {
            _this.permissionId = null;
            _this.permissionLabel = null;
            _this.currentParentNode = null;
            _this.currentParentNode = item;
            _this.showModal = !_this.showModal;
          }
        }, {
          label: '删除',
          click: function (item) {
            this.deleteItem(item);
          }
        }]
      }),
      grid: new LanayaUI.Grid({
        columns: [{
          label: '用户名',
          key: 'username'
        }, {
          label: '用户名',
          key: 'username'
        }, {
          label: '用户名',
          key: 'username'
        }, {
          label: '用户名',
          key: 'username'
        }, {
          label: '用户名',
          key: 'username'
        }],
        data: []
      }),
      showModal: false
    };
  }
};
</script>
